<template name="ChannelListModal">
  <div class="modal fade full-screen">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ 'channel_list'}}</h4>
        </div>
        <div class="modal-body scroll-box no-padding">
          <ul class="list-group threads">
            {{#unless channels.count}}
              <li class="list-group-item thread">{{_ 'app_no_record'}}</li>
            {{/unless}}
            {{#each channels}}
              <li class="list-group-item clearfix thread" id="{{_id}}">
                <div class="pull-right">
                  <a href="#" class="btn-edit-channel text-muted action"><i class="fa fa-edit"></i> {{_ 'app_action_edit'}}</a>
                  <a href="#" class="btn-channel-members text-muted action"><i class="fa fa-users"></i> {{_ 'thread_members'}}</a>
                </div>
                <div class="thread-icon">
                  <button type="button" class="avatar"><i class="fa fa-slack"></i></button>
                </div>
                <div class="thread-title">
                  <div class="thread-subject text-ellipsis">{{name}}</div>
                  <div class="message-summary text-ellipsis text-muted">{{email}}</div>
                </div>
              </li>
            {{/each}}
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{{_ 'app_action_discard'}}</button>
          <a href="#" id="btn-add-channel" class="btn btn-primary">{{_ "channel_action_new"}}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="AddChannelModal">
  <div class="modal fade modal-rounded">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ "channel_action_new"}}</h4>
        </div>
        {{#autoForm collection=formCollection schema=formSchema id="add-channel-form" type="normal"}}
          <div class="modal-body">
            {{> afQuickField name="name"}}
            {{> afQuickField name="email" domain=domain}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{_ "app_action_discard"}}</button>
            <button type="submit" class="btn btn-primary">{{_ "app_action_save"}}</button>
          </div>
        {{/autoForm}}
      </div>
    </div>
  </div>
</template>

<template name="EditChannelModal">
  <div class="modal fade modal-rounded">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ "channel_action_edit"}}</h4>
        </div>
        {{#autoForm collection=formCollection schema=formSchema doc=this id="edit-channel-form" type="normal"}}
          <div class="modal-body">
            {{> afQuickField name="name" value=name}}
            {{> afQuickField name="email" domain=domain value=email}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{_ "app_action_discard"}}</button>
            <button type="submit" class="btn btn-primary">{{_ "app_action_save"}}</button>
          </div>
        {{/autoForm}}
      </div>
    </div>
  </div>
</template>

<template name="ChannelMembersModal">
  <div class="modal fade full-screen">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
          <h4 class="modal-title">{{_ "channel_members"}} - {{channel.name}}</h4>
        </div>
        <div class="modal-body scroll-box">
          <ul class="list-group members-list">
            {{#unless members.count}}
              <li class="list-group-item members-item">{{_ 'app_no_record'}}</li>
            {{/unless}}
            {{#each members}}
              <li class="list-group-item members-item clearfix">
                <span class="pull-left">
                  {{> avatar user=user shape="circle" class="img-circle pull-left" size="small"}}
                </span>

                <div class="members-info">
                  <strong class="name">{{user.name}}</strong>
                  {{user.title}}
                  <span class="pull-right">
                    <a href="#" class="btn-remove-member action text-muted" data-id="{{user._id}}">
                      <i class="fa fa-remove"></i> {{_ "app_action_remove"}}
                    </a>
                  </span>
                  <div class="text-muted text-ellipsis">{{user.email}}</div>
                </div>
              </li>
            {{/each}}
          </ul>
          {{#if users.count}}
          <p class="page-header">{{_ "channel_choose_users"}}:</p>
          <ul class="list-group members-list">
            {{#each users}}
              <li class="list-group-item members-item clearfix">
                <span class="pull-left">
                  {{> avatar user=this shape="circle" class="img-circle pull-left" size="small"}}
                </span>

                <div class="members-info">
                  <strong class="name">{{name}}</strong>
                  {{title}}
                  <span class="pull-right">
                    <a href="#" class="btn-add-member action text-muted" data-id="{{_id}}">
                      <i class="fa fa-plus"></i> {{_ "app_action_add"}}
                    </a>
                  </span>
                  <div class="text-muted text-ellipsis">{{email}}</div>
                </div>
              </li>
            {{/each}}
          </ul>
          {{/if}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{{_ 'app_action_confirm'}}</button>
        </div>
      </div>
    </div>
  </div>
</template>
